<!--
功能：缴费主键,
作者：RanSheng,
邮箱：1534677527@qq.com",
时间：2021/6/5 12:30,
版本：v1.0,
修改记录：,
修改内容：,
修改人员：,
修改时间：,
-->
<template>
  <div class="box">
    <div class="apply">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item v-for="c in collapse"
                          :key="c.id"
                          :name="c.id"
                          class="collapse">
          <template slot="title">
            <div class="header"><i class="el-icon-school"></i>{{ c.name }}</div>
          </template>
          <div class="room-box">
            <div class="room"
                 v-for="r in c.roomList"
                 :key="r.id"
                 @click="room(r)">
              <span><i class="el-icon-menu"></i>{{ r.name }}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="dialog">
      <el-dialog title="欠费情况" :visible.sync="dialogTableVisible">
        <el-table :data="gridData"
                  border
                  stripe
                  class="table">
          <el-table-column
            type="index"
            label="编号"
          width="80">
          </el-table-column>
          <el-table-column
            v-for="c in column"
            :key="c.id"
            :property="c.prop"
            :label="c.label">
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {message} from "@/utils/age";
import {mapState} from "vuex";

export default {
  name: "Cost",
  data() {
    return {
      gridData: [],
      dialogTableVisible: false,
      activeNames: [2],
      collapse: [],
      is: [],
      column: [{
        id: 1,
        label: '截止时间',
        prop: 'costtime'
      },{
        id: 2,
        label: '缴费内容',
        prop: 'content'
      },{
        id: 3,
        label: '缴费金额',
        prop: 'money'
      },{
        id: 4,
        label: '缴费状态',
        prop: 'statue'
      }]
    };
  },
  components: {},
  computed: {
    ...mapState(["floor"])
  },
  mounted() {
    this.finCost()
  },
  methods: {
    room(r) {
      this.dialogTableVisible = true
      this.gridData = r.costList
    },
    handleChange(val) {
    },
    finCost() {
      this.$http.post('root/apply', this.floor).then(response => {
        if (response.data) {
          this.collapse = response.data
          message("success", "成功")
        } else {
          message("error", "报修内容为空！")
        }
      }).catch(err => {
        message("error", "请求参数错误")
      })
    }
  },
  watch: {},
  destroyed() {

  },
}
</script>

<style scoped>
.header {
  text-align: center;
  letter-spacing: 5px;
  width: 100%;
  font-size: 20px;
}

.room-box {
  display: flex;
  flex-wrap: wrap;
}

.room {
  background-color: #F3F3F3;
  cursor: pointer;
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: #000000;
  border-radius: 8px;
  transition: all .3s;
  margin: 0 10px;
}

.room:hover {
  background-color: #909399;
  color: #ffffff;
}
</style>
